<template>
  <el-row>
    <el-form-item label="选项:">
      <template>
        <el-row>
          <el-checkbox
            v-model="checked"
            style="margin-right: 10px"
          >A:</el-checkbox>
          <el-input style="width: 200px" />
          <el-upload
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            list-type="picture"
          >
            <el-button class="shangchuan">上传图片</el-button>
          </el-upload>
        </el-row>
        <el-row>
          <el-checkbox
            v-model="checked2"
            style="margin-right: 10px"
          >B:</el-checkbox>
          <el-input style="width: 200px" />
          <el-upload
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            list-type="picture"
          >
            <el-button class="shangchuan">上传图片</el-button>
          </el-upload>
        </el-row>
        <el-row>
          <el-checkbox
            v-model="checked3"
            style="margin-right: 10px"
          >C:</el-checkbox>
          <el-input style="width: 200px" />
          <el-upload
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            list-type="picture"
          >
            <el-button class="shangchuan">上传图片</el-button>
          </el-upload>
        </el-row>
        <el-row
          v-for="(item, index) in arrayData"
          :key="index"
        >
          <el-checkbox
            v-model="lll"
            style="margin-right: 10px"
          >D:</el-checkbox>
          <el-input style="width: 200px" />
          <el-upload
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            list-type="picture"
          >
            <el-button class="shangchuan">上传图片</el-button>
          </el-upload>
        </el-row>
      </template>
      <el-row>
        <el-button
          type="danger"
          icon="el-icon-plus"
          @click="btenjj"
        >增加选项与按钮</el-button>
      </el-row>
    </el-form-item>
  </el-row>

</template>

<script>
export default {
  data () {
    return {
      arrayData: [
        {
          id1: '',
          data: ''
        }
      ],
      dataNum: 0,
      checked: false,
      checked2: false,
      checked3: false,
      lll: false
    }
  },
  methods: {
    btenjj (item) {
      this.arrayData.push({
        id: this.dataNum++,
        data: ''
      })
    }
  }
}
</script>

<style scoped lang='less'>
/deep/.shangchuan {
  position: absolute;
  top: -8px;
  left: 29%;
  height: 50px !important;
  border: dashed #ccc;
}
el-checkbox {
  margin-right: 3px;
}
</style>
